<template>

  <div class=" paggs">
    <!-- 头部导航++++++++++++++++++++++ -->
    <Navv></Navv>
    <!-- 头部导航=============== -->

    <div class="mt_24">

      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="16">
          <div class="center mt_24">
            <div class=" bg-purple1" style="height: 700px;">
              <div class="f_22  p_30">

                <div class="row_a_c">
                  <div  class="f_16 mr_5" >公告详情</div>
                  <i @click="toUrl('/center/noticeList')" class="el-icon-error cursor" style="font-size: 26px;color: #1a82fb;"></i>
                </div>

                <div class="f_26 f_bold mt_50">{{noticeInfo.title}}</div>
                <div class="row mt_30">
                  <div class="f_14 color_A6A6A6">{{noticeInfo.created_at}}</div>
                  <!-- <div class="f_14 color_A6A6A6 ml_40">作者：作者作者</div> -->
                </div>
                <div class="f_18 mt_50" v-html="noticeInfo.content">
                </div>
                <div class=" color_ABABAB " style="margin-top: 90px;font-size: 16px;">最后一次编辑于 {{noticeInfo.updated_at}}</div>

                <!-- <div class="center dz mt_36">
                  <img class="" referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4karh3awuupvmk0bhtnb7o256y9c5bfa4a3b9b7-44ce-4d53-817c-7e8b2afe8fc5" />
                  <span class="ml_5" style="font-size: 16px;">点赞&nbsp;5</span>
                </div> -->

              </div>
            </div>
          </div>

        </el-col>
      </el-row>

    </div>

  </div>


</template>

<script>
  import Navv from "@/components/Navv";
  import * as Notice from "@/api/system/notice";
  export default {
    name: "DetailsNotice",
    components: {
      Navv
    },
    data() {
      return {
        noticeInfo:{},
        id: '',
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        activeName: 'first',
        ruleForm: {
          name: '',
        },

        rules: {
          name: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
        }

      }
    },

    mounted() {
      this.id = this.$route.query.id,
      this.getNoticeShow(); //通知，公告
    },
    created() {

    },


    methods: {

      /**通知，公告 */
      getNoticeShow() {
        this.loading = true;
        Notice.Show(this.id).then(response => {

          this.noticeInfo = response.data
          this.loading = false;
        });
      },

      toUrl(url) {

        this.$router.push({
          path: url
        })
      },


      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      handleClick(tab, event) {
        console.log(tab, event);
      },


      skip() {
        this.$router.replace({
          path: '/center'
        })
      },
    }
  };
</script>
<style scoped lang="scss">
  .paggs {
    background: #E4EEF9;
    height: 100%;
  }

  .boxs1 {
    padding: 10px;
    width: 150px;
    height: 95px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(125, 124, 130, 0.5);
    border-radius: 5px;
    position: fixed;
    top: 70px;
    left: 490px;
  }

  .boxs2 {
    padding: 10px;
    width: 150px;
    height: 95px;
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(125, 124, 130, 0.5);
    border-radius: 5px;
    position: fixed;
    top: 70px;
    left: 690px;
  }

  .xjt {
    font-size: 22px;
    margin-top: 5px;
    margin-left: 5px;
  }

  .qugwbt {
    width: 95px;
    height: 37px;
    background: #1A82FB;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 22px;
    font-weight: bold;
  }

  .bg-purple1 {
    width: 100%;
    min-width: 560px;
    background: #FFFFFF;
    border-radius: 10px;
  }









  .dz {
    width: 104px;
    height: 34px;
    background: #F4F4F5;
    border-radius: 5px;
  }
</style>
